<template>
	<StudentDeail :students="queryData">
		<el-col :span="2">
			<el-button type="primary" @click="searchbtn">查询</el-button>
		</el-col>
		<el-col :span="2">
			<el-button type="success" @click="addbHandler">添加</el-button>
		</el-col>
		<el-col :span="2">
			<el-button type="danger" @click="resetHandler">重置密码</el-button>
		</el-col>
	</StudentDeail>

	<el-table :data="students" stripe border >
		<el-table-column type="index" width="60" align="center" :index="indexMethod" label="序号">
		</el-table-column>
		<el-table-column prop="studentno" width="120" align="center" label="学号">
		</el-table-column>
		<el-table-column prop="classname" width="180"  align="center" label="班级">
		</el-table-column>
		<el-table-column prop="studentname" width="120"  align="center" label="姓名">
		</el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button type="primary" @click="editHandler(scope.row)">编辑</el-button>
				<el-button @click="deleteStudent(scope.row)" type="danger">删除</el-button>
				<el-button @click="resetPass(scope.row)" type="danger">重置密码</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination :hide-on-single-page="true" background @current-change="currentChange" layout="pager" :total="total">
	</el-pagination>

	<el-dialog title="title" v-model="addShow" width="60%">
		<StudentDeail :students="queryData">
		</StudentDeail>
		<el-button @click="addShow=false">取 消</el-button>
		<el-button type="primary" @click="addStudent">确 定</el-button>
	</el-dialog>
	
	<el-dialog title="title" v-model="editShow" width="60%">
		<StudentEdit :students="queryData">
		</StudentEdit>
		<el-button @click="editShow=false">取 消</el-button>
		<el-button type="primary" @click="editStudent">确 定</el-button>
	</el-dialog>
</template>

<script>
	import {
		ElIcon,
		ElForm,
		ElRow,
		ElCol,
		ElButton,
		ElTable,
		ElTableColumn,
		ElPagination,
		ElMessageBox
	} from "element-plus"

	import StudentDeail from "@/components/StudentDetail.vue";
	import StudentEdit from "@/components/StudentEdit.vue";
	export default {
		components: {
			StudentDeail,StudentEdit
		},
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				total: 0,
				queryData: {
					studentNo: "",
					className: "",
					studentName: ""
				},
				students: [],
				addShow: false,
				editShow:false
			}
		},
		methods: {
			initQueryData() {
				this.queryData = {
					studentNo: "",
					className: "",
					studentName: ""
				};
			},
			indexMethod(index) {
				return (this.pageNo - 1) * this.pageSize + index + 1;
			},
			currentChange(e) {
				this.pageNo = e;
				this.getStudnets();
			},
			async addStudent() {
				let result = await this.$axios.post("/student/add", {
					studentno: this.queryData.studentNo,
					classname: this.queryData.className,
					studentname: this.queryData.studentName
				});
				let {
					msg
				} = result.data;
				this.addShow = false;
				this.$nextTick(() => {
					ElMessageBox.alert(msg, "提示");
					this.initQueryData();
					this.getStudnets();
				})
			},
			editHandler(e){
				this.queryData=e;
				this.editShow = true;			
			},
			async editStudent(){
				let result = await this.$axios.post("/student/edit", {
					studentno: this.queryData.studentno,
					classname: this.queryData.classname,
					studentname: this.queryData.studentname
				});
				let {
					msg
				} = result.data;
				this.editShow = false;
				this.$nextTick(() => {
					ElMessageBox.alert(msg, "提示");
					this.getStudnets();
				})
			},
			async deleteStudent(e) {
				ElMessageBox.confirm('此操作将永久删除【' + e.studentno + '】, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					console.log(e.studentno)
					let result = await this.$axios("/student/delete", {
						params: {
							studentno: e.studentno
						}
					});
					let {
						msg
					} = result.data;
					this.$nextTick(() => {
						ElMessageBox.alert(msg, "提示");
						this.getStudnets()
					})
				}).catch(() => {});
			},
			async resetPass(e){
				ElMessageBox.confirm('此操作将重置【' + e.studentno + '】密码, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let result = await this.$axios("/users/reset", {
						params: {
							studentno: e.studentno
						}
					});
					let { msg } = result.data;
					ElMessageBox.alert(msg, "提示");
				}).catch(() => {});
			},
			searchbtn() {
				this.pageNo = 1;
				this.getStudnets();
			},
			addbHandler() {
				this.initQueryData()
				this.addShow = true;
			},
			async resetHandler(){
				ElMessageBox.confirm('此操作将重置所有用户密码, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let result = await this.$axios("/users/resetAll");					
					let {
						msg
					} = result.data;
					ElMessageBox.alert(msg, "提示");
				}).catch(() => {});
			},
			async getStudnets() {
				try{
					let result = await this.$axios("/student/list", {
						params: {
							studentno: this.queryData.studentNo,
							classname: this.queryData.className,
							studentname: this.queryData.studentName,
							pageNo: this.pageNo,
							pageSize: this.pageSize
						}
					})
					if(result.data.code==0){
						this.students = result.data.data;
						this.total = result.data.count;
					}else ElMessageBox.alert(result.data.msg, "提示");
				}
				catch(e){
					console.log(e);
				}
			}
		},
		mounted() {
			 this.getStudnets();
		}
	}
</script>
<style scoped>
	.el-message-box {
		z-index: 3000 !important;
		/* 确保弹窗在最上层 */
		top: 50px !important;
		/* 距离顶部50px */
		left: 100px !important;
		/* 距离左侧100px */
	}
</style>